// function MyTab(ele,type='click'){
//     this.ele = document.querySelector(ele);
//     this.btns = this.ele.querySelectorAll('ul > li');
//     this.boxs = this.ele.querySelectorAll('ol > li');
//     this.type = type
// }

// MyTab.prototype.init = function(){
//     for(let i=0;i<this.btns.length;i++){
//         this.btns[i].addEventListener(this.type,()=>{
//             for(let j=0;j<this.btns.length;j++){
//                 this.btns[j].classList.remove('active');
//                 this.boxs[j].classList.remove('active');
//             }

//             this.btns[i].classList.add('active');
//             this.boxs[i].classList.add('active');


//         })
//     }
// }


// const p1 = new MyTab('#box1','mouseover');
// p1.init();

// const p12 = new MyTab('#box2');
// p12.init();


function MyTab(ele,type){
    this.ele = document.querySelector(ele);
    this.btns = this.ele.querySelectorAll('ul > li');
    this.boxs = this.ele.querySelectorAll('ol > li');
    this.type = type || {}
}

MyTab.prototype.init = function(){
    for(let i=0;i<this.btns.length;i++){
        this.btns[i].addEventListener(this.type.type||'click',()=>{
            for(let j=0;j<this.btns.length;j++){
                this.btns[j].classList.remove('active');
                this.boxs[j].classList.remove('active');
            }

            this.btns[i].classList.add('active');
            this.boxs[i].classList.add('active');


        })
    }
}


const p1 = new MyTab('#box1',{type:'mouseover'});
p1.init();

const p12 = new MyTab('#box2',{type:'mouseout'});
p12.init();